<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 账号主页地址</text>
		</view>


		<view class="textarea-box margin-top_60rpx">
			<textarea placeholder-style="font-size:30rpx;" v-model="url" placeholder="复制短视频抖音主页账号地址链接" maxlength="500"
				style="height: 100%;" />
		</view>

		<view class="">
			<view class="v-title flex-align-center">
				<text></text>
				<view>主页采集要求</view>
			</view>
			<view v-if="homepage_notice" style="margin: 30rpx 20rpx; 0 20rpx" class="v-padding-center margin-top_16rpx">
				<uv-parse class="" :content="homepage_notice" :selectable="true"></uv-parse>
			</view>
		</view>
		<view class="height80">

		</view>

		<view class=" flex" :class="url?'c-but':'c-butb'" @click="but()">下一步</view>

		<sunui-popup ref="serviceItemsPopup">
			<template v-slot:content>

				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">

						</view>
						<text>抓取配置</text>
						<uni-icons @click='closeWriteOffIcon()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>

					<view class="flex-between rechargeBtn" v-if="Number(user.balance)<30">
						<view class="font-size_24rpx " style="color: red;">
							算力不足：{{user.balance}}
						</view>

						<view class="flex-between" @click="" @click="Recharge()" v-if="memberSetObj.is_open">
							<text style="font-size_22rpx">去充值</text>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</view>
					<view class="flex-between rechargeBtns" v-else>
						<view class="font-size_24rpx " style="color: rgba(114, 101, 255, 1);">
							剩余算力：{{user.balance}}
						</view>

						<view class="flex-between" @click="Recharge()" v-if="memberSetObj.is_open">
							<text style="font-size_22rpx">去充值</text>
							<uni-icons type="right" size="18"></uni-icons>
						</view>
					</view>
					<view class="margin_40rpx_0">
						任务标题
					</view>

					<view class="card margin-bottom_50rpx">
						<view class="myNmae">

							<view class="">
								<input class="uni-inputsa" type="text" v-model="name" placeholder="请输入任务标题" />
							</view>


						</view>

					</view>

					<!--  -->

					<view class="flex-between margin-bottom_40rpx">
						<view class="">
							{{'作品数量（'+workNum+'）'}}

						</view>
						<view class="flex-between ">

							<view class="display-a margin-right_40rpx" @click="getType(1)">
								<image class="matrix-12" :src="workStatus == 1 ? matrix13 : matrix12"></image>
								<view>全部</view>
							</view>

							<view class="display-a margin-right_40rpx" @click="getType(2)">
								<image class="matrix-12" :src="workStatus == 2 ? matrix13 : matrix12"></image>
								<view>最新</view>
							</view>

						</view>
					</view>


					<view class="display-a margin-bottom_30rpx margin-top_30rpx" v-if="workStatus == 2">
						<view class="label " @click="getLabel(20,1)"
							:style="1 == tabIndex ? 'color:rgba(91, 136, 255, 1);border: 2rpx solid rgba(91, 136, 255, 1); background-color:rgba(244, 247, 255, 1);' : ''">
							20</view>
						<view class="label " @click="getLabel(50,2)"
							:style="2 == tabIndex ? 'color:rgba(91, 136, 255, 1);border: 2rpx solid rgba(91, 136, 255, 1); background-color:rgba(244, 247, 255, 1);' : ''">
							50</view>
						<view class="label " @click="getLabel(100,3)"
							:style="3 == tabIndex ? 'color:rgba(91, 136, 255, 1);border: 2rpx solid rgba(91, 136, 255, 1); background-color:rgba(244, 247, 255, 1);' : ''">
							100</view>
						<view class="label " @click="getLabel('自定义',4)"
							:style="4 == tabIndex ? 'color:rgba(91, 136, 255, 1);border: 2rpx solid rgba(91, 136, 255, 1); background-color:rgba(244, 247, 255, 1);' : ''">
							 {{numberWords?numberWords:'自定义'}}</view>


					</view>

					<view class="PublishTags flex" @click="payNow()" style="background-color: ;">
						一键分析: {{(tallySetHomepage_tally).toFixed(2)}}（算力）
					</view>

				</view>

			</template>
		</sunui-popup>
		
		
		<sunui-popup ref="customizePop">
			<template v-slot:content>
		
				<view class="serviceItemsContain ">
					<view class="top flex-between">
						<view class="">
		
						</view>
						<text>自定义字数</text>
						<uni-icons @click='closeWriteOffIconS()' class="uniIcon" type="closeempty" size="22"
							style="color: #07070791;">
						</uni-icons>
					</view>
		
					<view class="card margin-bottom_50rpx">
						<view class="myNmae">
		
							<view class="">
								<input class="uni-inputsa" type="number" @input="numberWordsFn(numberWords)" v-model="numberWords" placeholder="请输入自定义字数" />
							</view>
		
		
						</view>
		
					</view>
		
					<view class="PublishTags flex" @click="customizePopFn()">
						确定
					</view>
		
				</view>
		
			</template>
		</sunui-popup>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				matrix12: this.$imgs.group3129,
				matrix13: this.$imgs.group3152,
				richText: '',
				navTop: '',
				materialBg: this.$imgs.violet,
				// 地址
				url: '',
				// 任务名称
				name: '',
				tallySetHomepage_tally:0,
				// 全部 最新
				workStatus: 1,
				selLabel: 20,
				workNum: '',
				tallySet: uni.getStorageSync('tallySet'),
				hiddenModel: true, //显示影藏
				opacityStyle: 0, //透明度
				heightSystemss: "",
				user: uni.getStorageSync('user'),
				homepage_notice: '',
				memberSetObj:{},
				tabIndex:'',
				numberWords:'',
				




			}
		},
		onLoad() {
			const app = getApp();
			this.navTop = app.globalData.navTop;

			this.tallySetFn()
			this.userInfos()
			this.faddishNotice()
			this.memberSetFn()






		},
		computed: {


		},
		methods: {
			numberWordsFn(index){
					this.tallySetHomepage_tally = index *  this.tallySet.homepage_tally 
					this.selLabel=index
			},
			customizePopFn(){
				this.$refs.customizePop.close()
			},
			closeWriteOffIconS(){
				this.$refs.customizePop.close()
			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {
			
			
					}
				});
				if (result.errno == 0) {
			
					this.memberSetObj = result.data
			
					console.log(result.data)
			
				}
			},
			Recharge() {


				uni.navigateTo({
					url: '/pages/contactUs/memberCenter'
				});
			},
			async faddishNotice() {
				const result = await this.$http.get({
					url: this.$api.clipSet,

				});
				if (result.errno == 0) {
					console.log(result.data.homepage_notice)
					this.homepage_notice = result.data.homepage_notice


				}
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			async tallySetFn() {
				const result = await this.$http.get({
					url: this.$api.tallySet,

				});
				if (result.errno == 0) {
					console.log(result.data)

					uni.setStorageSync('tallySet', result.data);



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			async getVideoCountFn() {
				const result = await this.$http.post({
					url: this.$api.homepageUserData,
					data: {
						url: this.url,
						// uid: uni.getStorageSync('uid'),

					}
				});
				if (result.errno == 0) {
					console.log(result.data)

					this.workNum = result.data
					
					if (this.workStatus == 1) {
						this.tallySetHomepage_tally = this.tallySet.homepage_tally * this.workNum
					} else {
						this.tallySetHomepage_tally = this.selLabel *  this.tallySet.homepage_tally 
					}

				


				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			getLabel(index,selIndex) {
				
				if(index=='自定义'){
					this.$refs.customizePop.show({
						anim: 'bottom',
						position: 'bottom',
						shadeClose: false, //false使用户不能点击其它关闭页面
						topclose: false,
						zIndex: 99999
					});
					this.tabIndex=selIndex
					this.numberWords=''
					
					// this.selLabel = 3
				}else{
					this.selLabel = index;
					
					this.tabIndex=selIndex
					this.tallySetHomepage_tally = this.selLabel *  this.tallySet.homepage_tally 
				}
				
				


			},
			getType(type) {
				this.workStatus = type;

				if (type == 1) {
					this.tallySetHomepage_tally = this.tallySet.homepage_tally * this.workNum
				} else {
					this.tallySetHomepage_tally = this.selLabel *  this.tallySet.homepage_tally 
				}
			},

			navBack() {
				this.$sun.navBack()
			},
			async payNow() {
				
				
				if (!this.name) {

					this.$sun.toast('请输入标题名称', 'none')
					return
				}

				if (!this.workNum) {

					this.$sun.toast('当前没有作品数量无法分析主页', 'none')
					return
				}
				
				uni.showLoading({
					title: '加载中...',
					mask: true
				});

				const result = await this.$http.post({
					url: this.$api.homepageSave,
					data: {
						uid: uni.getStorageSync('uid'),

						name: this.name,
						url: this.url,
						last_count: this.workNum,
						video_count: this.workStatus == 1 ? this.workNum : this.selLabel


					}
				});
				if (result.errno == 0) {
					uni.hideLoading()
					console.log(result.data)
					this.$refs.serviceItemsPopup.close()
					this.$sun.toast(result.message, 'none')
					setTimeout(()=>{
						
						
						this.$sun.navGo('/pagesA/creatCenter/ipAccountCollection/collectionList')
					},500)
					
					
					
					

				} else {
					uni.hideLoading()
					setTimeout(()=>{
						this.$sun.toast(result.message, 'none')
					},500)
				}

			},
			closeWriteOffIcon() {
				this.$refs.serviceItemsPopup.close()
			},
			
			but() {
				
				
				if (this.user.is_member == 0&&this.memberSetObj.is_open==1) {
					uni.showModal({
						title: '温馨提示',
						content: '你当前不是会员，请开通会员后享受该功能',
						confirmText: '开通会员',
						confirmColor: '#4A5EFF',
						success: async (res) => {
							if (res.confirm) {
				
				
								this.$sun.navGo('/pages/contactUs/memberCenter')
				
							} else if (res.cancel) {
				
							}
						}
					});
				} else {
					
					if (!this.url) {
						this.$sun.toast('请输入短视频主页地址', 'none')
						return
					}
					
					// 获取商品数量
					this.getVideoCountFn()
					this.$refs.serviceItemsPopup.show({
						style: 'background-color:#fff;width:750rpx;height:auto;border-radius: 40rpx 40rpx 0 0;z-index:9999!important',
						anim: 'bottom',
						position: 'bottom',
						shadeClose: false, //false使用户不能点击其它关闭页面
						topclose: false,
						zIndex: 99999
					});
				}
				

				
			}


		}
	}
</script>

<style lang="less">
	.v-home-page {
		background-image: (var(--bg-image));
		background-repeat: no-repeat;
		background-size: contain;
		position: relative;
		height: 100vh;
		padding: 20rpx;
		position: relative;
background-color: #fff !important;

		#barTitle {
			position: fixed;
			width: 750rpx;
			top: 0;
			left: 0;
			background: #fff;
			color: #000000;
			text-align: center;
			font-weight: bold;
			z-index: 9999
		}

		#barTitle>text {
			position: absolute;
			left: 0;
			right: 0;
			bottom: 20rpx
		}

		.serviceItemsContain {
			padding: 0rpx 30rpx 30rpx 30rpx;
			background-color: #fff;

			height: auto;
			overflow-x: auto;

			.label {
				background-color: #fff;
				color: #A1A1A1;
				display: flex !important;
				justify-content: center;
				align-items: center;
				padding: 8rpx 16rpx;
				display: inline-block;
				margin-right: 20rpx;
				border: 2rpx solid rgba(229, 229, 229, 1);

				/* 矩形 6012 */
				width: 154rpx;
				height: 68rpx;
				box-sizing: border-box;

				border-radius: 20rpx;




			}

			.matrix-12 {
				width: 40rpx;
				height: 40rpx;
				margin-right: 10rpx;
			}

			.rechargeBtn {
				border-radius: 20rpx;
				padding: 20rpx;
				background: rgba(255, 244, 244, 1);
			}

			.rechargeBtns {
				border-radius: 20rpx;
				padding: 20rpx;
				background: rgba(244, 243, 255, 1);
				;
			}

			.PublishTags {
				z-index: 99;
				margin-top: 10rpx;
				height: 102rpx;
				border-radius: 20rpx;
				color: #fff;


				bottom: 20rpx;
				background: rgb(120, 93, 246);
			}

			.myNmae {

				background-color: #fff;
				min-width: 50rpx;

				.avatar {
					width: 84rpx;
					height: 84rpx;
				}

				input {
					text-align: left;
				}

				.uni-input {

					height: 100rpx;
				}

				.uni-inputsa {
					width: 94%;
					height: 90rpx;
					border-radius: 20rpx;
					background: rgb(245, 245, 245);
					margin: 20rpx 0;
					padding: 0rpx 20rpx;
				}

				.uni-inputs {
					text-align: left !important;
				}

				.backgroundImg {

					height: 154rpx;


				}

			}





			.top {
				padding: 30rpx 0;
				width: 100%;

				text {
					color: rgb(0, 0, 0);
					font-size: 36rpx;
					font-weight: 400;
				}
			}

		}

		// 多行文本
		.textarea-box {
			// width: 630rpx;
			border-radius: 20rpx;
			background: #fff;
			padding: 24rpx;

			height: calc(100vh - 1120rpx);

			.textarea-color {
				color: #999;
			}
		}

		.v-title {
			margin-top: 60rpx;
			// padding: 0rpx 26rpx 42rpx;

			text {
				width: 10rpx;
				height: 24rpx;
				border-radius: 138rpx;

				background: #7266FF;
			}

			view {
				margin-left: 10rpx;
				font-size: 34rpx;
				font-weight: bold;
			}
		}

		.c-but {

			font-weight: 700;

			padding: 20rpx 40rpx;

			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 3%;
			border: none;

			z-index: 999;


			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;
			background: linear-gradient(90deg, #6475FF, #7464FF 100%);
		}

		.c-butb {
			font-weight: 700;

			padding: 20rpx 40rpx;

			// color: #ffffff;
			width: 90%;
			position: fixed;
			bottom: 40rpx;
			left: 3%;
			border: none;

			z-index: 999;


			border-radius: 20rpx;
			margin: 20rpx;
			text-align: center;
			font-size: 32rpx;
			height: 100rpx;
			margin-top: 30rpx;
			color: #ffffff;




			background: linear-gradient(82.59deg, rgb(100, 117, 255) 0.12%, rgb(116, 100, 255) 99.911%);
			opacity: 0.52;

		}
	}
</style>